<template>
    <view class=""  >
        <scroll-view scroll-y=true  style="height: 100vh;">
        
		<view class="container ">
			

           

			<view class="main backgroundlinear">
                
                
				<z-paging ref="paging" v-model="indexData.pages" @query="upCallback" :fixed="false" height="100%">
                    <u-navbar :is-back="false" title="" class="flex"  style=""> 
				<!-- #ifdef MP -->
                    <view class="navbar mp_navbar flex ">
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <view class="navbar h5_navbar flex ">
                    <!-- #endif -->
                            <!-- <u-icon name="search" size="34" color="#888888"></u-icon>
                        <text class="flex items-center ml-[20rpx]">请输入关键词搜索</text> -->
                        <view v-for="(item, index) in indexData.pages" :key="'content'+index">
                            <template v-if="item.name == 'search'">
                                <w-search :content="item.content" :styles="item.styles" />
                            </template>
                        </view>
                    </view>
                </u-navbar>
                    <view class="back_img" >
                        <view class="back_top_index_gc" :style="{'background-image':'url('+gIndexImage.img+')'}">
                            
                        </view>
                    </view>
                  
                    <view class="back_img" v-if="false" >
						<!-- <img src="https://mzd-admin.muzhandao.com/api/uploads/image/20240507/a435316c-d4bd-46cd-974c-cf16533713a8.png" alt="" style="width:100%;height:400px;" srcset="" /> -->

						<img :src="gIndexImage.img" alt="" style="width:100%;height:400px;" srcset="" />

                        
					</view>
					
                    <view class="back_img_2" >
                            <view v-for="(item, index) in indexData.pages" :key="index">
                                <!-- <template v-if="item.name == 'search'">
                                <w-search :content="item.content" :styles="item.styles" />
                                </template> -->
                                    <!-- <template v-if="item.name == 'banner'">
                                    <w-banner :content="item.content" :styles="item.styles" />
                                </template> -->
                                <template v-if="item.name == 'nav'">
                                    <view class="bottom_view">
                                        <w-nav class="bottom_view_wnav" :content="item.content" :styles="item.styles" width="102" height="102"/>
                                    </view>
                                </template>
                            </view>
                        </view>
					<!-- 轮播图 -->
					<!-- <view v-if="indexData?.category?.length">
						<googsListcarousel></googsListcarousel>
					</view> -->
					<!-- 今日特价、热销排行榜-->
					<view class="jingri">
						<view class="img_view"  ><!--  @click="goJingru()" -->
							<img :src="gIndexImage.img2" alt="" srcset="" style="width: 100%;height: 120rpx;"/>
						</view>
						<view class="img_view"  ><!--  @click="goRexiao()" -->
							<img :src="gIndexImage.img3" alt="" srcset="" style="width: 100%;height: 120rpx;"/>
						</view>
					</view> 
                    <view class="tabsView" :class="tabsClick">
                        <div class="tabs" @click="tabsClick = 'bg_1'"></div>
                        <div class="tabs" @click="tabsClick = 'bg_2'"></div>
                        <div class="tabs" @click="tabsClick = 'bg_3'"></div>
                     </view>
					<!-- <view class="xinren" v-if="imgUrl" @click="goxinren()">
						<div :style="{'background-image':'url('+baseUrl+'/api/uploads/'+imgUrl+')'}" style="width: 100%;height: 100%;background-size: 100%;"></div>
					</view> -->
						
					<!-- 热门服务 -->
				<!-- 	<template v-if="indexData?.hotService?.length">
						<hot :lists="indexData.hotService"></hot>
					</template> -->
                    <template v-if="tabsClick == 'bg_1'">
                        <Googs :lists="googsdata?.sonList" :googsname="googsdata.name"></Googs>
                       
					</template>
                    <div v-if="tabsClick == 'bg_2'" style="width: calc(100% - 40rpx);margin: 20rpx;">
                        <img  @click="goJingru()"  style="margin: 0 5%;width: 90%;height:automata;" src="http://mzd-admin.muzhandao.com/api/uploads/image/20240905/5896a342-9e3b-4efb-8420-2f0ba45fb2d8.jpg" alt="">
                    </div>
					<!-- 师傅推荐 -->
					<!-- <template v-if="indexData?.staff?.length">
                    <master :lists="indexData.staff"></master>
                </template> -->
					<!-- 推荐分类 -->
					<!-- {{indexData.category}} -->
					<!-- <view v-if="indexData?.category?.length">
						<category :lists="indexData.category"></category>
					</view> -->
					<!-- {{googsdata?.sonList}} -->
					<!-- 服务列表 -->
					<view v-if="tabsClick == 'bg_3'">
						
                        <Googs :lists="indexData.hotService" :googsname="''"></Googs>
						<!-- <uni-load-more status="more"></uni-load-more> -->
						<!-- <view class="load_more" @click="getgoogsfuc(googsdata.pageNo+1,googsdata.pageSize)">
							点击加载更多
						</view> -->
					</view>
                     
					<!-- <u-back-top :scroll-top="scrollTop" :custom-style="{background:'#663d74'}"></u-back-top> -->
				</z-paging>
			</view>


			<!-- 底部导航栏 -->
			<Tabbar />
		</view>
      
	    </scroll-view>
 
        <u-popup v-model="popupshow" mode="center" class="posterClass" border-radius="14">
		<view>
            <div  style="width: 70vw;height: 600rpx;background-color: #0000;" @click="getcodedata">
                    <img :src="imgcode" style="width: 100%;height: 100%;    border-radius: 15rpx;" alt="">
                   <!--  <button @click="getcodedata" :disabled="codedis">{{ codelabel }}</button> -->
                </div>
                <div style="margin-top:30px;width: 100%;display: flex;align-items: center;">
                    <img @click="popupshow = false" style="width: 32px;height: 32px;margin: 0 auto;" src="http://mzd-admin.muzhandao.com/api/uploads/image/20241013/51e660ea-d607-4f1f-b4c8-533ee4d79a84.png" alt="">
                </div>
		</view>
	</u-popup>
	<u-popup class="bottompopup" v-model="loginshow" @close="loginclose" @open="loginopen" mode="bottom" height="500rpx" >
        <view class="h-[1000rpx] p-[40rpx]" style="    display: flex;    flex-direction: column;background-image: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/2a044e11-dc14-4471-95c8-b127b90f0c3e.png');background-size: 100% ;  border-top-left-radius: 20px;
        border-top-right-radius: 20px;">
               
            <view class="flex items-center" >
                    <image
                        class="w-[60rpx] h-[60rpx] rounded"
                        mode="heightFix"
                        :src="websiteConfig.logo"
                    ></image>
                    <text class="text-3xl ml-5 font-bold" style="color: #fff;">{{ websiteConfig.name }}</text>
                </view>
                <view class="mt-[30rpx]" style="    display: flex;    flex-direction: column;background-color: #0000;">
                    <u-button style="margin:0 auto;width: 75%;" shape="circle" type="success" @click="loginWithWeChat">微信一键登录</u-button>
                    <u-button style="margin:0 auto;margin-top: 30rpx;width: 75%;" shape="circle"   @click="loginshow = false">暂不登录</u-button>
                   
                     
                </view>
                <u-checkbox v-model="isCheckAgreement" shape="circle" style="margin-top: 30rpx;">
                    <view class="text-xs flex"  >
                        已阅读并同意
                        <view @click.stop>
                            <navigator
                                class="text-primary"
                                hover-class="none"
                                url="/pages/agreement/agreement?type=service"
                            >
                                《服务协议》
                            </navigator>
                        </view>

                        和
                        <view @click.stop>
                            <navigator
                                class="text-primary"
                                hover-class="none"
                                url="/pages/agreement/agreement?type=privacy"
                            >
                                《隐私协议》
                            </navigator>
                        </view>
                    </view>
                </u-checkbox>
            </view>
       
	</u-popup>
	    
</view>

</template>

<script setup lang="ts">
import {
  getIndex,
  getgetIndexImage,
  getgoogs,
  getToday,
  getcouponCodeInfo,
  postcouponcode,
} from "@/api/shop";
import {
  reactive,
  shallowRef,
  defineComponent,
  onMounted,
  ref,
  computed,
} from "vue";
import {
  onLoad,
  onUnload,
  onShareAppMessage,
  onPageScroll,
  onShow,
} from "@dcloudio/uni-app";
import Tabbar from "@/components/tabbar/tabbar.vue";
// import Category from './comp/category.vue'
// import googsListcarousel from './comp/googsListcarousel.vue'
import { getIndexImageIndexxinren, postreceivecouponid } from "@/api/index";

import Googs from "./comp/googs.vue";
// import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import Hot from "./comp/hot-list.vue";
import { useAppStore } from "@/stores/app";
import { useUserStore } from "@/stores/user";
import { getuserSalesman, login } from "@/api/account";
import cache from "@/utils/cache";
import { BACK_URL, USER_ID } from "@/enums/cacheEnums";
// import { onReachBottom } from '@dcloudio/uni-app'; // 从正确的模块导入
const popupshow = ref(false);
const scrollTop = ref<number>(0);
const appStore = useAppStore();
const paging = shallowRef();

const indexData = reactive<any>({
  pages: [],
  hotService: [],
  staff: [],
  category: [],
});

const googsdata = reactive<any>({
  id: 9981,
  pageNo: 1,
  pageSize: 10,
  name: "服务列表",
  sonList: [],
});
const TodayData = reactive<any>({
  id: 190,
});

const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ""}/`;

const gIndexImage = reactive<{ img: string; img2: string; img3: string }>({
  img: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png",
  img2: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png",
  img3: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png",
});

const upCallback = async (): Promise<void> => {
  try {
    const data = await getIndex({
      cityId: appStore.cityInfo.city_id,
    });
    for (const key in indexData) {
      if (data[key] != null && data[key] != undefined) {
        indexData[key] = data[key];
      }
    }
    indexData.pages = JSON.parse(data.pages);
    //console.log(indexData.category, indexData, '1111111111')

    // 重构首页分类数据
    let category_copy = [
      {
        createTime: "2024-03-06 17:09:51",
        id: 96,
        name: "今日推荐",
        sonList: [],
      },
    ];
    indexData.category.forEach((i) => {
      //console.log(i, 'iiii')
      category_copy[0].sonList = category_copy[0].sonList.concat(i.sonList);
    });

    indexData.category = category_copy;

    //console.log(indexData, '2222222222')

    paging.value.complete(indexData.pages);
  } catch (err) {
    //console.log(err)
    paging.value.complete(false);
  }
};
const imgUrl = ref("");
const codeData = ref();
const codeType = ref();
onLoad((options) => {
  uni.$on("refreshhome", () => {
    upCallback();
  });
  //console.log(111);
  // 顶部图片
  getgetIndexImage(0).then((res) => {
    //console.log(res, 'res');
    gIndexImage.img = baseUrl + "api/uploads/" + res;
  });
  // 今日推荐图片
  getgetIndexImage(2).then((res) => {
    //console.log(res, 'res');
    gIndexImage.img2 = baseUrl + "api/uploads/" + res;
  });
  // 热销排行榜图片
  getgetIndexImage(3).then((res) => {
    //console.log(res, 'res');
    gIndexImage.img3 = baseUrl + "api/uploads/" + res;
  });
  getgoogsfuc(googsdata.pageNo, googsdata.pageSize);
  getTodayData();

  getIndexImageIndexxinren({ type: 6 }).then((res) => {
    imgUrl.value = res;
  });
  const couponCode = uni.getStorageSync("couponCode");
  const couponId = uni.getStorageSync("couponId");
  const referrers = uni.getStorageSync("referrers");
  console.log("couponCode:" + couponCode);
  console.log("couponId:" + couponId);
  if (couponCode && userStore.isLogin) {
    codeData.value = couponCode;
    codeType.value = "couponCode";
    getcouponCodeinfo(couponCode);
  } else if (couponId && userStore.isLogin) {
    codeData.value = couponId;
    codeType.value = "couponId";
    getcouponCodeinfo(couponId);
  } else if (referrers && userStore.isLogin) {
    codeData.value = couponId;
    codeType.value = "couponId";
    getuserSalesman(referrers);
  }
});
const getgoogsfuc = async (pageNo: number, pageSize: number) => {
  //console.log('点击加载更多');
  googsdata.pageNo = pageNo;
  googsdata.pageSize = pageSize;
  const res = await getgoogs({ pageNo: pageNo, pageSize: pageSize });
  res.lists.forEach((item: any) => {
    googsdata.sonList.push(item);
  });
  if (res.count > pageNo * pageSize) {
    setTimeout(() => {
      getgoogsfuc(pageNo + 1, pageSize);
    }, 200);
  }
  //console.log(googsdata, 'googsdata.value');
};
const getTodayData = async () => {
  const res = await getToday();
  TodayData.id = res.id;
  //console.log(res, 'res.getToday');
};

onUnload(() => {
  uni.$off("refreshhome");
});

// #ifdef MP
const updateManager = wx.getUpdateManager();
updateManager.onUpdateReady(function () {
  wx.showModal({
    title: "更新提示",
    content: "新版本已经准备好，是否重启应用？",
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate();
      }
    },
  });
});
updateManager.onUpdateFailed(function () {
  uni.$u.toast("新版本下载失败，请检查网络！");
});
// #endif

const goPage = (url: string) => {
  uni.navigateTo({
    url: url,
  });
};
const goJingru = () => {
  uni.navigateTo({
    url: `/pages/goods/index?id=${TodayData.id}`,
  });
};
const goRexiao = () => {
  uni.navigateTo({
    url: "/pages/rexiao/index",
  });
};
const goxinren = () => {
  uni.navigateTo({
    url: "/pages/index/xinren/index",
  });
};
console.log("11111111122222222221");
const loadMoreData = () => {
  console.log("滑倒底部咯11");
};
onMounted(() => {
  // 	console.log('111111111123333333333');
  // 	onReachBottom(loadMoreData);
  // uni.onReachBottom(loadMoreData);
});

onPageScroll((e) => {
  console.log("页面滚动了", e);
  scrollTop.value = e.scrollTop;
});
const imgcode = ref();
const codelabel = ref("点击领取");
const tabsClick = ref("bg_1");

const getcouponCodeinfo = async (data: any) => {
  let res;
  console.log("二维码33333333333");
  console.log(codeType.value);
  if (codeType.value == "couponId") {
    res = await getcouponCodeInfo({ couponId: codeData.value });
    console.log("二维码111111111111111");
    console.log(res);
    if (res.imageAddress) {
      imgcode.value = res.imageAddress;
      popupshow.value = true;
    } else {
      uni.$u.toast("优惠券已被使用");
    }
  } else if (codeType.value == "couponCode") {
    res = await getcouponCodeInfo({ couponCode: codeData.value });
    console.log("二维码12222222222222222");
    console.log(res);
    if (res.imageAddress) {
      imgcode.value = res.imageAddress;
      popupshow.value = true;
    } else {
      uni.$u.toast("优惠券已被使用");
    }
  }
  /* let res = await getcouponCodeInfo(data); */
  uni.removeStorageSync("couponId");
  uni.removeStorageSync("couponCode");
};
const codedis = ref(false);
const getcodedata = async () => {
  codedis.value = true;
  let res;
  if (codeType.value == "couponId") {
    postreceivecouponid(codeData.value)
      .then((res) => {
        if (res == null || res == "null") {
          codelabel.value = "领取成功";
          setTimeout(() => {
            popupshow.value = false;
          }, 1000);
        } else {
          uni.$u.toast(res.msg);
        }
      })
      .catch((orr) => {
        console.log(orr);
        console.log("=================1231231");
        uni.$u.toast(orr);
      });
  } else if (codeType.value == "couponCode") {
    res = await postcouponcode(codeData.value);
    if (res == null || res == "成功") {
      codelabel.value = "领取成功";
      setTimeout(() => {
        popupshow.value = false;
      }, 2000);
    } else {
      uni.$u.toast(res);
      popupshow.value = false;
    }
  }
};

onShareAppMessage((res: any) => {
  console.log(res);
  console.log("---------------------");

  return {
    title: `分享给好友`,
    imageUrl: "123",
  };
});
const websiteConfig = computed(() => appStore.getWebsiteConfig);
const userStore = useUserStore();
const loginshow = ref(false);
const loginclose = () => {
  loginshow.value = false;
};
const loginopen = () => {};
onShow(async () => {
  console.log("userStore.isLogin");
  console.log(userStore.isLogin);
  try {
    if (!userStore.isLogin) {
      //未登入状态
      loginshow.value = true;
    }
  } catch (error: any) {
    uni.hideLoading();
  }
});

/* const loginWithPhone = (e:any) => {
    console.log("手机号")
    console.log(e)
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    console.log('获取到的手机号:', e.detail);
    // 处理手机号登录逻辑
  } else {
    console.error('获取手机号失败:', e.detail.errMsg);
  }
}; */
enum LoginTypeEnum {
  MOBILE = "mobile",
  ACCOUNT = "account",
  MNP = "mnp",
}
const formData = reactive({
  scene: "",
  username: "",
  password: "",
  code: "",
  mobile: "",
  referrers: "",
});
const isCheckAgreement = ref(false);
const loginWithWeChat = async () => {
  if (!isCheckAgreement.value) {
    uni.$u.toast("请勾选已阅读并同意《服务协议》和《隐私协议》");
    return;
  }
  // 实现微信一键登录逻辑
  const { code }: any = await uni.login({
    provider: "weixin",
  });
  console.log(
    formData.referrers,
    "111111111",
    cache.get("tuixiaoy"),
    "cache.get(USER_ID)"
  );
  const data = await login({
    code,
    scene: LoginTypeEnum.MNP,
    referrers: formData.referrers ? formData.referrers : cache.get("tuixiaoy"),
  }).catch((e) => {
    uni.$u.toast(e);
    return;
  });
  console.log("data");
  console.log(data);
  /*   if (data.isNew) {
  
  } */
  userStore.temToken = data.token;
  userStore.login(data.token);
  /*  uni.showToast({
        title: '登录成功',
        icon: 'success'
    }) */
  await userStore.getUser();
  console.log(userStore);
  uni.$u.toast("登录成功");
  loginshow.value = false;

  const couponCode = uni.getStorageSync("couponCode");
  const couponId = uni.getStorageSync("couponId");
  const referrers = uni.getStorageSync("referrers");

  if (couponCode) {
    codeData.value = couponCode;
    codeType.value = "couponCode";
    getcouponCodeinfo(couponCode);
  } else if (couponId) {
    codeData.value = couponId;
    codeType.value = "couponId";
    getcouponCodeinfo(couponId);
  } else if (referrers) {
    codeData.value = couponId;
    codeType.value = "couponId";
    getuserSalesman(referrers);
  }
};
</script>

<style lang="scss">
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  flex-direction: column;
  .u-navbar {
    /*  background: #0000!important; */
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240911/93442fbe-5172-4376-b5fa-6a7f7f8c0e04.png") !important;
    background-size: 100% !important;
  }
  .back_img {
    width: 100%;
    height: 986rpx;
    margin-bottom: -40px;
    padding-top: 100px;

    margin-top: -95px;
    /*   position: absolute; */
    background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240911/93442fbe-5172-4376-b5fa-6a7f7f8c0e04.png");
    background-size: 100% 100%;
    // opacity: 0.5;
    z-index: 1;
  }
  .back_top_index_gc {
    /* background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240905/43e2b373-ee9b-4d7c-a364-dab07a5ff102.png"); */
    background-size: 100% 100%;
    width: calc(100vw - 20px);
    height: 240rpx;
    margin: 0 auto;
  }
  .main {
    flex: 1;
    min-height: 0;

    overflow: scroll;
    // background:rgba(140, 67, 223,0.5);
    // background:#ccc;
    background-color: rgb(246, 246, 246);
    background-color: rgba(244, 244, 244, 1) !important;
    // .search_view{

    // }
  }
}
.back_img_2 {
  display: flex;
  /*  position: relative; */
  height: 196rpx;
  width: calc(100vw - 20px);
  margin: 0 auto;
  margin-top: -550rpx;
  .bottom_view {
    height: 110px;
    width: calc(100vw - 20px);
    padding-top: -10px;
    .nav {
      /* padding-top: 0; */
      .items-center {
        padding: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
      }
    }
  }
}
.mp_navbar {
  width: 550rpx;
}

.h5_navbar {
  width: 710rpx;
}

.navbar {
  // height: 68rpx;
  // color: #C5C5C5;
  // border-radius: 60rpx;
  // font-size: 28rpx;
  // background-color: #f2f2f2;
}

.bottom_view_wnav > view > view {
  display: flex;
  justify-content: space-between;
  .items-center {
    width: 23%;
    padding: 20rpx 20rpx !important;
  }
}

.bottom_view_wnav {
  .u-image {
    width: 102rpx !important;
    height: 102rpx !important;
  }
  .mt-_bl_14rpx_br_ {
    font-size: 24rpx;
    color: rgba(34, 34, 34, 1);
  }
}

.load_more {
  margin: 0px auto;
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  background: #e1d7ec;
  width: 50vw;
}
.jingri {
  display: flex;
  padding: 0 10rpx;
  margin-top: 20px;
  .img_view {
    width: calc(50% - 20rpx);
    margin: 10rpx;
  }
}
.xinren {
  width: 100%;
  padding: 10px 5px;
  height: 243px;
}

.nav-bottom-line {
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px; /* 线的高度 */
    background-color: #ff0000; /* 线的颜色 */
    transform: scaleY(0.5); /* 缩放线，可以使线看起来更细 */
  }
}
.u-border-bottom:after {
  border: none !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
  border-bottom-width: 0px !important;
  border-left-width: 0px !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-style: none !important;
  border-top-color: initial !important;
  border-right-color: initial !important;
  border-bottom-color: initial !important;
  border-left-color: initial !important;
  border-image-source: initial !important;
  border-image-slice: initial !important;
  border-image-width: initial !important;
  border-image-outset: initial !important;
  border-image-repeat: initial !important;
}
.tabsView {
  margin: 0 auto;
  display: flex;
  width: calc(100vw - 20px);
  height: 96rpx;
  background-size: 100% 100%;
  .tabs {
    width: 33%;
    height: 100%;
  }
  margin-top: 20rpx;
}
.tabsView.bg_1 {
  background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240905/f171f826-f79f-441c-897c-9dbe6337605f.png");
}
.tabsView.bg_2 {
  background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240905/80b81c1f-88d7-497d-8bb2-483969d43457.png");
}
.tabsView.bg_3 {
  background-image: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240905/efa4b688-2b2f-472c-81ec-4ecea8a53a84.png");
}
.u-slot-content,
.u-navbar-inner {
  align-items: normal !important;
}
.u-slot-content {
  padding-top: 8rpx;
}

.navbar-bg {
  height: 64rpx !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 24rpx !important;
  color: rgba(153, 153, 153, 1) !important;

  .navbar {
    align-items: center;
  }
}
.u-drawer-content.u-drawer-bottom.u-drawer-content-visible {
  /* background: #0000!important; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.posterClass {
  .u-mode-center-box {
    background-color: #0000 !important;
  }
}
.u-checkbox__icon-wrap--circle {
  border-color: #f3615e !important;
}
</style>